
/*
 * @Author: fu.lanyun
 * @Date: 2018-11-02 10:35:46
 * @Desc: 流程图绘制页面
 */
import React, { PureComponent } from "react";
import { connect } from "dva";
import router from "umi/router";
import { Spin, Modal } from "antd";

import FlowEditor from "components/g6edit";
import CanvasSelected from "components/flowdetailpannel/CanvasSelected";
import EdgeSelected from "components/flowdetailpannel/EdgeSelected";
import NodeSelected from "components/flowdetailpannel/NodeSelected";
import GroupSelected from "components/flowdetailpannel/GroupSelected";

import { modelJsonProperties } from "components/g6edit/structureData";
import { getViewPortHeight, openNotificationWithIcon } from "utils/comm";
import styles from "./index.less";

const isTrue = true;
const titleObj = {
  userTask: "用户任务",
  serviceTask: "服务任",
  scriptTask: "脚本任务",
  eventStart: "开始事件",
  eventEnd: "结束事件",
  gatewayInclude: "包含网关",
  gatewayParallel: "并行网关",
  gatewayExclude: "排他网关",
  "flow-polyline-round": "连线",
};

@connect(({ appListMenu, loading, FlowChart }) => ({
  loading,
  menuAppStore: appListMenu,
  FlowChartStore: FlowChart,
}))
class FlowDetail extends PureComponent {
  constructor(props) {
    super(props);
    this.openNotificationWithIcon = openNotificationWithIcon.bind(this);
    this.getViewPortHeight = getViewPortHeight;
    this.state = {
      // isEdit: true,
      // modelJson: {},
      modelProperties: modelJsonProperties,
      sampleDetailData: {},
    };
    this.flowHeight = "auto";
    this.loadfun = "FlowChart/getModelDetail";
  }

  componentDidMount() {
    this.flowHeight = this.getViewPortHeight();
    setTimeout(() => {
      this.initModelDetail();
    }, 100);
  }

  componentWillUnmount() {
    const { dispatch } = this.props;
    dispatch({ type: "FlowChart/clearData" });
  }

  getEditThis = (_this) => {
    this.flowEditRef = _this;
  };

  // 通过Id获取信息
  initModelDetail = () => {
    const {
      location: {
        query: { modelid = "", deploymentId = "", modelCode = "" },
      },
      dispatch,
    } = this.props;
    if (!(modelid || deploymentId || modelCode) || !this.flowEditRef) return;
    let list = "FlowChart/getModelDetail";
    let payload;
    if (modelCode) {
      payload = {
        modelCode,
      };
    } else {
      payload = {
        modelId: modelid,
      };
    }
    if (deploymentId) {
      list = "FlowChart/getDeploymentDetail";
      this.loadfun = "FlowChart/getDeploymentDetail";
      payload = {
        deploymentId,
      };
    }

    dispatch({ type: list, payload }).then(({ errCode }) => {
      if (errCode === 0) {
        const {
          FlowChartStore: { detailData = {} },
          menuAppStore: { appList = [] },
        } = this.props;
        const { modelProperties } = this.state;
        const {
          modelJson = {},
          description,
          modelId,
          name,
          appId,
          key,
          busiId,
        } = detailData || {};
        const sampleDetailData = {
          description,
          modelId,
          name,
          key,
          appId,
          busiId,
        };
        const { nodes = [], edges = [], properties = {} } = modelJson;
        const nodesData = { nodes, edges };
        this.flowEditRef.changePageMode("editchart");
        this.flowEditRef.drawModel(nodesData); // 反显数据
        this.setState(
          {
            modelProperties: { ...modelProperties, ...properties },
            sampleDetailData,
          },
          () => {
            this.flowEditRef.editorForceFit("cc");
          },
        );
        if (nodes.length === 0) {
          this.openNotificationWithIcon("warning", "", `还未配置流程模型`);
        }
        // dispatch({ type: "FlowChart/getCandidateGroups", payload: {} });
        // if (appList.length === 0) {
        //   dispatch({ type: "appListMenu/getAppListData" });
        // }
      }
    });
  };

  handleModelPropChange = (modelProperties) => {
    this.setState({ modelProperties });
  };

  reBack = () => {
    Modal.confirm({
      title: "您有未保存的更改",
      content: "您想如何处理未保存的更改？",
      cancelText: "放弃更改",
      okText: "继续编辑",
      onOk() {},
      onCancel() {
        router.push("/flowmanage/flowconfigure");
      },
    });
  };

  updateDrawData = () => {};

  detailpannelContent = (selectedModel) => {
    const { shape } = selectedModel || {};
    const {
      FlowChartStore: { candidateGroupsData = [] },
      menuAppStore,
      dispatch,
    } = this.props;
    const { modelProperties, sampleDetailData } = this.state;
    const { appListAll = [], appBusinessObjAll = {} } = menuAppStore;
    const title = shape ? titleObj[shape] : "";
    return (
      <React.Fragment>
        {/* 节点 */}
        <NodeSelected
          title={title}
          dispatch={dispatch}
          updateGraph={this.updateDrawData}
          selectedModel={selectedModel}
          modelProperties={modelProperties}
          handleModelPropChange={this.handleModelPropChange}
          candidateGroupsData={candidateGroupsData}
          getNodes={this.getNodes}
          disable={isTrue}
        />
        {/* 边 */}
        <EdgeSelected
          title={title}
          updateGraph={this.updateDrawData}
          selectedModel={selectedModel}
          modelProperties={modelProperties}
          handleModelPropChange={this.handleModelPropChange}
          disable={isTrue}
        />
        {/* 画布 */}
        <CanvasSelected
          selectedModel={selectedModel}
          updateGraph={this.updateDrawData}
          modelProperties={modelProperties}
          handleModelPropChange={this.handleModelPropChange}
          disable={isTrue}
          sampleDetailData={sampleDetailData}
          handleDetailChange={this.handleDetailChange}
          appList={appListAll}
          appBusinessObj={appBusinessObjAll}
        />
        {/* 分组 */}
        <GroupSelected
          title={title}
          updateGraph={this.updateDrawData}
          selectedModel={selectedModel}
          modelProperties={modelProperties}
          handleModelPropChange={this.handleModelPropChange}
          disable={false}
        />
      </React.Fragment>
    );
  };

  render() {
    const { loading } = this.props;
    const height = this.flowHeight > 450 ? this.flowHeight : 450;
    const detailLoading = loading.effects[this.loadfun] || false;
    return (
      <Spin spinning={detailLoading} delay={300}>
        <FlowEditor
          height={height}
          className={styles.flowchart}
          containerClassName={styles.flowchart__visible}
          getEditThis={this.getEditThis}
          onBack={this.reBack}
          detailpannelContent={(selected) => this.detailpannelContent(selected)}
          detailpannelHidden={isTrue}
          isViewData={isTrue}
          toobarHidden={isTrue}
          itempanelHidden={isTrue}
          contextmenuHidden={isTrue}
        />
      </Spin>
    );
  }
}

export default FlowDetail;
